<template>
  <Layout style="height: 100%">
    <Sider
      hide-trigger
      collapsible
      :width="120"
      :collapsed-width="64"
      class="left-sider"
      :style="{overflow: 'hidden',marginLeft: '-10px',background: '#efefef'}"
    >
      <Menu theme="primary" @on-select="(name)=>{this.currentGroup = name}" mode="vertical">
        <MenuItem v-for="(item,index) in configList" :active-name="currentGroup" :key="index" :name="item.id">
          {{ item.name }}
        </MenuItem>
      </Menu>
    </Sider>
    <Content>
      <div style="margin: 0 10px; height: 100%;">
        <div v-for="(item,index) in configList" v-show="currentGroup === item.id" :key="index">
          <Tabs v-if="item.childGroups && item.childGroups.length > 0" style="height: 100%;" :animated="false">
            <TabPane v-for="(item2,index2) in item.childGroups" :key="index2" :label="item2.name">
              <Alert v-if="item2.instructions">
                配置说明
                <template slot="desc"><p v-html="item2.instructions"></p></template>
              </Alert>
              <dynamic-form
                :form-data="item2.configs"
              >
                <template v-slot:button>
                  <vxe-button icon="iconfont icon-baocun" type="submit" status="primary" @click="submitEvent2(item2)">
                    保存设置
                  </vxe-button>
                  <vxe-button icon="iconfont icon-shuaxin" type="reset">重置</vxe-button>
                </template>
              </dynamic-form>
            </TabPane>
          </Tabs>
          <div v-else>
            <dynamic-form
              :form-data="item.configs"
            >
              <template v-slot:button>
                <vxe-button icon="iconfont icon-baocun" type="submit" status="primary">保存设置</vxe-button>
                <vxe-button icon="iconfont icon-shuaxin" type="reset">重置</vxe-button>
              </template>
            </dynamic-form>
          </div>
        </div>
      </div>
    </Content>
  </Layout>
</template>

<script>
import { configMain, configSave } from '@/api/config'
import DynamicForm from '@/components/dynamic-form'

export default {
  name: 'index',
  components: {
    DynamicForm
  },
  data () {
    return {
      currentGroup: 0,
      loading2: false,
      configList: [],
      mode: ''
    }
  },
  created () {
    this.loadConfig()
  },
  methods: {
    loadConfig () {
      configMain().then(({ data }) => {
        this.configList = data.data.configList
        this.currentGroup = parseInt(this.configList[0].id)
      })
    },
    submitEvent2 (valueArr) {
      this.loading2 = true
      configSave(valueArr.configs)
        .then(res => {
          setTimeout(() => {
            this.loading2 = false
            this.$XModal.message({ message: '保存成功', status: 'success' })
          }, 1000)
        })
        .catch(err => {
          this.$XModal.message({
            message: err.response.data.message,
            status: 'error',
            duration: 1000
          })
        })
    },
    searchEvent () {
      this.$XModal.message({ message: '查询事件', status: 'info' })
    },
    resetEvent () {
      this.$XModal.message({ message: '重置事件', status: 'info' })
    }
  }
}
</script>

<style lang="scss" scoped>
.ivu-menu {
  width: 120px !important;
}
</style>
